<template>
    <page-box class="custom-page-box">
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <page-search>
            <page-search-column class="fixed-column">
                <page-search-item>
                    <el-input class="pbb__search-input" v-model="searchForm.name" placeholder="表单名称" clearable></el-input>
                </page-search-item>
                <page-search-item>
                    <el-select class="pbb__search-input user" v-model="searchForm.state" placeholder="状态" clearable>
                        <el-option :value="0" label="未处理"></el-option>
                        <el-option :value="1" label="处理"></el-option>
                    </el-select>
                </page-search-item>
                <page-search-item>
                    <el-button type="primary" @click="getTableSearch">搜索</el-button>
                </page-search-item>
            </page-search-column>
        </page-search>
        <el-table
            v-show="tableData.length"
            :data="tableData"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            style="width: 100%;height: calc(100% - 48px);overflow-y: auto;">
            <el-table-column
                type="index"
                align="center"
                label="序号"
                width="60">
            </el-table-column>
            <el-table-column
                prop="name"
                label="表单名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="goveName"
                label="区域"
                width="180">
            </el-table-column>
            <el-table-column
                prop="deptName"
                label="部门">
            </el-table-column>
            <el-table-column
                prop="formKind"
                label="类型">
                <template slot-scope="scope">
                    {{ scope.row.formKind | getType }}
                </template>
            </el-table-column>
            <el-table-column
                prop="state"
                label="状态">
                <template slot-scope="scope">
                    <span :class="scope.row.itemStatus ? 'table-tips-success' : 'table-tips-error'">{{ scope.row.itemStatus ? "已处理" : "未处理" }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="reviewerName"
                label="审核人">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleRow(scope.row)">{{ scope.row.itemStatus ? "查看" : "处理" }}</el-button>
<!--                    <el-divider direction="vertical"></el-divider>-->
<!--                    <el-button size="mini" type="text" @click="deleteData(scope.row)">查看</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <ask-empty-text
            style="min-height: 400px;"
            v-if="tableData.length === 0">
        </ask-empty-text>
        <template v-slot:footer v-if="total > 0">
            <pagination :total="total" :page.sync="pageIndex" :limit.sync="pageSize"
                        @pagination="getTable"/>
        </template>
    </page-box>
</template>

<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";

@Component({
    name: "ResourceAdd",
    filters: {
        getType(val: any) {
            switch (val) {
            case 1:
                return "公共表单";
            case 2:
                return "部门表单";
            case 3:
                return "用户表单";
            case 4:
                return "乡镇表单";
            case 5:
                return "上报表单";
            case 6:
                return "导入表单";
            }
        }
    }
})
export default class ResourceAdd extends Vue {
    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 20;
    // 当前页码
    pageIndex = 1;
    // 表格数据
    tableData = []
    searchForm = {
        name: "",
        cityCode: "",
        formType: "",
        state: ""
    }

    typeList: any [] = [{
        value: 1,
        label: "人文"
    }, {
        value: 2,
        label: "资源"
    }, {
        value: 3,
        label: "项目"
    }, {
        value: 4,
        label: "产业"
    }, {
        value: 5,
        label: "事务"
    }]

    stateList: any [] = [{
        value: 0,
        label: "未处理"
    }, {
        value: 1,
        label: "已处理"
    }]

    areaValue: any = {};

    beforeRouteEnter(to: any, from: any, next: any) {
        next((vm: any) => {
            if (from.name !== "ResourceAttrMatch") {
                vm.pageIndex = 1;
                vm.getTable();
            }
        });
    }

    activated() {
        this.getTable();
    }

    getType(val: any) {
        return val ? this.typeList.filter((item: any) => item.value === val)[0].label : "";
    }

    getTableSearch() {
        this.pageIndex = 1;
        this.getTable();
    }

    // 查询表格
    async getTable() {
        const { name, formType, state } = this.searchForm;
        const res = await this.$server["resource/formList"]({
            data: {
                name,
                formType,
                state,
                governmentId: this.getAreaId(),
                pageSize: this.pageSize,
                currentPage: this.pageIndex
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 查询政级id
    getAreaId() {
        if (!this.areaValue.area) return "";
        const name = this.areaValue.town.name === "" ? "askCityareaPanelRef" : "askCitytownPanelRef";
        const list = (this.$refs.cityCascader as any).$refs[name][0].sourceList;
        return list.filter((item: any) => item.code.toString() === this.searchForm.cityCode)[0].id;
    }

    // 删除
    deleteData(row: any) {
        this.$confirm("是否确定删除？", "删除", {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true,
            closeOnClickModal: false
        }).then(async() => {
            const res = await this.$server["resource/deleteUsers"]({
                params: {
                    id: row.id
                }
            });
            if (res.data.code === 200) {
                this.$message.success("操作成功!");
                await this.getTable();
            } else {
                this.$message.error(res.data.message || "接口请求错误!");
            }
        }).catch();
    }

    // 修改地区
    async handleChange(value: any) {
        this.areaValue = value;
    }

    // 处理
    handleRow(row: any) {
        this.$router.push({
            path: "/resource-manage/user-add/attr-match",
            query: {
                id: row.id,
                name: row.name,
                description: row.description,
                descriptionType: row.descriptionType,
                status: row.itemStatus ? "1" : "0"
            }
        });
    }

    resetForm(formName: any) {
        (this.$refs[formName] as any).resetFields();
    }
}
</script>

<style scoped lang="scss">
</style>
